<template>
  <el-col :span="24" class='actions-top'>
    <div class="list-header">
      <slot name="sls-header-before"></slot>
    </div>
    <el-button
      type='danger'
      icon='delete'
      v-if='btn_info.batch!==false && btn_info.batch_delete!==false'
      :disabled='batch.flag'
      @click='onBtnEvent({type:"BatchDelete"})'>
      {{btn_info.batch_delete_text || '删除选中'}}{{batch.ids.length ? '(' + batch.ids.length + ')' : ''}}
    </el-button>

    <el-button
      v-if='btn_info.add!==false'
      type='primary'
      icon='add'
      @click='onBtnEvent({type:"Add"})'>{{btn_info.add_text || '添加'}}
    </el-button>

    <div class='list-header'>
      <slot name="sls-header-after"></slot>
    </div>

    <div
      v-if="fields && fields.length"
      class="list-search">
      <form-data
        :Setting="setting"
        :FieldList='fields'
        :DefaultValue="default_value"
        @onSubmit='onSearch'></form-data>
    </div>
  </el-col>
</template>

<script>
  export default {
    data () {
      return {
        disabled: true
      }
    },
    computed: {
      batch () {
        return this.Batch
      },
      btn_info () {
        return this.BtnInfo
      },
      fields () {
        return this.Search.fields || []
      },
      default_value () {
        return this.Search.default_value || {}
      },
      setting () {
        return this.Search.setting || {inline: true}
      }
    },
    props: {
      Batch: {
        type: Object,
        default () {
          return {}
        }
      },
      BtnInfo: {
        type: Object,
        default () {
          return {}
        }
      },
      Search: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    methods: {
      onBtnEvent (opts) {
        this.$emit('onBtnEvent', opts)
      },
      onSearch (opts) {
        this.$emit('onSearch', opts)
      }
    },
    created () {

    },
    mounted () {

    },
    watch: {}
  }
</script>
<style >
  .list-header {
    display: inline-block;
  }

  .list-search {
    display: inline-block;
    float: right;
  }
</style>
